<template>
  <div id="product_details">
    <el-button type="text" @click="back">返回</el-button>
    <div :data="productId">
      产品名称：<span v-for="item in productId" :key="item.name">{{ item.name }}</span><br>
      产品价格：<span v-for="item in productId" :key="item.price">{{ item.price }}</span><br>
      产品描述：<span v-for="item in productId" :key="item.description">{{ item.description }}</span><br>
      <!-- <div  v-for="item in productId" :key="item.photo">{{item.photo}}</div> -->
      产品主图：<br><el-image :src="src" style="width: 200px; height: 200px" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      productId: [],
      src: ''
    }
  },
  created() {
    var id = this.$route.query.id
    console.log(id)
    this.findIdproduct()
  },
  methods: {
    // 给返回按钮绑定事件
    back() {
      this.$router.back()
    },

    // 封装查询某一个产品信息的详情
    findIdproduct() {
      var id = this.$route.query.id
      this.$axios.get('/product/findById', { params: { id }}).then(response => {
        console.log(response.data)
        this.productId = response.data
        this.src = response.data.photo
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#product_details{
  padding: 20px;
  line-height: 45px;
}
</style>
